<!-- <section class="content container-fluid"> -->
<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-md-12 mb-3">
                <filter-list request="request" callback="getList(pageIndex)"></filter-list>
            </div>

            <div class="col-md-12 text-right">
                <!-- <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups"> -->
                    <!-- <div class="btn-group mr-2"> -->
                        <a href="/portal/post/create?module_id={{moduleId}}" class="btn btn-sm btn-primary">
                            <i class="fas fa-plus"></i> Create new post
                        </a>
                        <a data-toggle="modal" data-target="#modal-nav-posts-{{moduleId}}" class="btn btn-sm btn-primary text-white">
                            <i class="fas fa-search"></i> Link current post
                        </a>
                        <a href="/portal/module/details/{{moduleId}}" class="btn btn-sm btn-primary">
                            <i class="fas fa-pen"></i> Edit module
                        </a>
                    <!-- </div> -->
                <!-- </div> -->
            </div>
            <modal-nav-posts save="saveOthers()" src-field="'moduleId'" src-id="moduleId" selected="others"
                query="'not_module_id='"></modal-nav-posts>
        </div>
    </div>
    <div class="card-body">
        <table id="list-page" class="table table-sm table-hover sortable" cellspacing="0" ng-init="getList()">
            <thead class="thead-light">
                <tr>
                    <th scope="col" style="width: 3%;">
                        <!-- <small class="fa fa-grip-vertical text-black-50 align-middle"></small> -->
                    </th>
                    <th scope="col" style="width: 4%;">
                        <!-- <span class="fa fa-grip-vertical text-black-50-numeric-down"></span> -->
                    </th>
                    <th scope="col" style="width: 25%;">
                        Title
                    </th>
                    <th scope="col" width="10%">
                        Image
                    </th>
                    <th scope="col" width="10%">
                        Created Date
                    </th>
                    <th scope="col" style="width: 10%;">
                        Author
                    </th>

                    <th scope="col" style="width: 5%;"></th>
                </tr>
            </thead>

            <tbody class="sortable" dnd-list="data.items" dnd-disable-if="canDrag">
                <!-- <tr ng-if="canDrag">
                    <td colspan="7"><small class="text-info"
                            ng-bind="translate('warning_can_not_drag_drop',true, '(Drag & Drop feature only active when priority is asc)')"></small>
                    </td>
                </tr> -->
                <tr ng-repeat="item in data.items" dnd-draggable="item" dnd-effect-allowed="move"
                    dnd-selected="selected = item" dnd-moved="updateInfos($index)"
                    ng-class="{'selected': selected === item}">
                    <td style="cursor:grab;" class="drag-header">
                        <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                    </td>
                    <td>
                        <input type="text" value="{{item.priority}}"
                            class="item-priority form-control form-control-sm d-inline" style="width:40px;">
                    </td>
                    <td>
                        <small>
                            <span ng-bind-html="item.post.title"></span>
                        </small>
                    </td>
                    <td>
                        <div ng-if="item.post.image!=''">
                            <preview-image img-height="50" img-src="item.post.imageUrl"></preview-image>
                        </div>

                    </td>
                    <td>
                        <small>
                            {{item.post.createdDateTime | utcToLocal}}
                        </small>
                    </td>
                    <td>
                        {{item.post.createdBy}}
                    </td>

                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                            <a href="/portal/post/details/{{item.post.id}}" class="btn btn-link text-primary">
                                <span class="fas fa-pen"></span>
                            </a>
                            <a ng-click="preview(item.post)" target="_blank" class="btn btn-link text-primary">
                                <span class="fas fa-eye"></span>
                            </a>

                            <a ng-click="remove(item.moduleId,item.postId);" class="btn btn-link">
                                <span class="fas fa-trash-alt text-danger"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">

        <div class="row">

            <div class="col-6">
                <!-- ngIf: canDrag --><small ng-if="canDrag" class="text-info ng-binding ng-scope"
                    ng-bind="translate('warning_can_not_drag_drop',true, 'Note: Drag Drop only allow when order by priority asc')">Note:
                    Drag Drop only allow when order by priority asc</small><!-- end ngIf: canDrag -->
            </div>

            <div class="col-6">
                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
                    scroll-top="true"></paging>
            </div>
        </div>
    </div>
</div>


<!-- </section> -->